﻿<template>
    <div>
        <p>
            测试父级privide  子级inject  时无法获取值问题
        </p>
        <p>本实例可以看到</p>
        <ul>
            <li>inject语法</li>
            <li>组件间生命周期顺序</li>
        </ul>
        <son/>
        <daughter/>
    </div>
</template>
<!-- beforecate和created(它们被setup方法本身所取代) -->
<script setup>
import son from './components/son.vue';
import daughter from './components/daughter.vue';
import { onMounted,onBeforeMount, onBeforeUpdate, onUpdated,onBeforeUnmount, onUnmounted } from 'vue';
const curvuename = 'index'

console.log(`${curvuename} setup`)
onMounted(()=>{
    console.log(`${curvuename} onMounted`)
})
onBeforeMount(()=>{
    console.log(`${curvuename} onBeforeMount`)
})
onBeforeUpdate(()=>{
    console.log(`${curvuename} onBeforeUpdate`)
})
onUpdated(()=>{
    console.log(`${curvuename} onUpdated`)
})
onBeforeUnmount(()=>{
    console.log(`${curvuename} onBeforeUnmount`)
})
onUnmounted(()=>{
    console.log(`${curvuename} onUnmounted`)
})
</script>
<style scoped>
    .son{
        background-color: #f0f0f0;
        padding: 10px;
        margin: 10px 0;
    }
    .daughter{
        background-color: #e6f7ff;
        padding: 10px;
        margin: 10px 0;
    }
</style>